<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width" />
	<title>子页面</title>
	<link rel="stylesheet" type="text/css" href="/static/stylesheets/detail.css">
	<link rel="stylesheet" type="text/css" href="/static/stylesheets/flexcss.css">
</head>
<body class="HolyGrail">
	<?php $this->load->view('inc/header');?>
	<div class="head-img">
		<div class="group">
			<span class="title">监测省份</span>
			<span class="vice-title">Monitoring of the provinces</span>
		</div>
	</div>
	<main class="HolyGrail-body">
		<section class="right-panel HolyGrail-content">
			<div class="panel-header">
				<div class="breadcrumbs">
					<ul>
						<li>当前位置：</li>
						<li><a href="/home">首页</a><i class="iconfont icon-arrowright"></i></li>
						<li><a href="#">监测省份</a><i class="iconfont icon-arrowright"></i></li>
						<li><a href="#">北京</a></li>
					</ul>
				</div>
				<span class="title">监测地点</span>
			</div>
			<div class="panel-body max-w-690">
				<ul class="Grid">
					<li class="Grid-cell">
						<div class="Grid">
							<div class="left Grid-cell u-1of3"><img src="/static/images/jietai-temple.jpg" alt=""></div>
							<div class="right Grid-cell">
								<span class="title">戒台寺</span>
								<div class="brief"><p>戒台寺位于北京市门头沟区的马鞍山上，始建于唐武德万年（公园622年），原名慧聚寺，明朝英宗皇帝赐名为万寿禅寺，因寺内建有全国最大的佛教戒坛，民间通称为戒坛寺，又叫戒台寺...<p></div>
							</div>
						</div>
					</li>
					<li class="Grid-cell">
						<div class="Grid">
							<div class="left Grid-cell u-1of3"><img src="/static/images/xiang-mountain.jpg" alt=""></div>
							<div class="right Grid-cell">
								<span class="title">香山</span>
								<div class="brief"><p>香山公园位于北京西北郊，始建于金代，占地面积160余公顷，主峰香炉峰（俗称鬼见愁），海拔557米。园内文物古迹众多，是一座具有山林特色的皇家园林。在京西“三山五园”中占一山一园...</p></div>
							</div>
						</div>
					</li>
					<li class="Grid-cell">
						<div class="Grid">
							<div class="left Grid-cell u-1of3"><img src="/static/images/miaofeng-mountain.jpg" alt=""></div>
							<div class="right Grid-cell">
								<span class="title">妙峰山</span>
								<div class="brief"><div><p>妙峰山风景名胜区妙峰山风景名胜区位于京西门头沟区境内，距市中心50余公里，面积20平方公里，景区以“古刹、奇松、怪石”而闻名。妙峰山属太行山脉，火成岩结构，主峰海拔1291米，山势峭拔...</p></div></div>
							</div>
						</div>
					</li>
				</ul>
			</div>	
		</section>
		<nav class="left-panel">
			<div class="head-block">
				<span class="title">监测省份</span>
				<span class="vice-title">provinces</span>
			</div>
			<div class="panel-body">
				<ul>
					<li class="dropdown">
						<i class="iconfont icon-arrowright-t open"></i>
<<<<<<< HEAD
						<a href="#" data-toggle="dropdown" class="open">北京</a>
						<ul class="dropdown-menu">
							<li><a href="#">戒台寺</a><i class="iconfont icon-arrowright"></i></li>
							<li><a href="#">香山</a><i class="iconfont icon-arrowright"></i></li>
							<li><a href="#">妙峰山</a><i class="iconfont icon-arrowright"></i></li>
						</ul>
					</li>
					<li class="dropdown"><i class="iconfont icon-arrowright-t close"></i><a href="#" data-toggle="dropdown">新疆维吾尔自治区</a></li>
					<li class="dropdown"><i class="iconfont icon-arrowright-t close"></i><a href="#" data-toggle="dropdown">陕西</a></li>
					<li class="dropdown"><i class="iconfont icon-arrowright-t close"></i><a href="#" data-toggle="dropdown">甘肃</a></li>
					<li class="dropdown"><i class="iconfont icon-arrowright-t close"></i><a href="#" data-toggle="dropdown">河南</a></li>
					<li class="dropdown"><i class="iconfont icon-arrowright-t close"></i><a href="#" data-toggle="dropdown">内蒙古</a></li>
=======
						<a  data-toggle="dropdown" class="open">北京</a>
						<ul class="dropdown-menu">
							<li><a>戒台寺</a><i class="iconfont icon-arrowright"></i></li>
							<li><a>香山</a><i class="iconfont icon-arrowright"></i></li>
							<li><a>妙峰山</a><i class="iconfont icon-arrowright"></i></li>
						</ul>
					</li>
					<li class="dropdown"><i class="iconfont icon-arrowright-t close"></i><a data-toggle="dropdown">新疆维吾尔自治区</a></li>
					<li class="dropdown"><i class="iconfont icon-arrowright-t close"></i><a data-toggle="dropdown">陕西</a></li>
					<li class="dropdown"><i class="iconfont icon-arrowright-t close"></i><a data-toggle="dropdown">甘肃</a></li>
					<li class="dropdown"><i class="iconfont icon-arrowright-t close"></i><a data-toggle="dropdown">河南</a></li>
					<li class="dropdown"><i class="iconfont icon-arrowright-t close"></i><a data-toggle="dropdown">内蒙古</a></li>
>>>>>>> d427fe4957349cb4d3ef4f92e8fa1e56bd4d01d4
				</ul>
			</div>
		</nav>
	</main>
	
	<script src="/static/javascripts/jquery-1.11.3.min.js"></script>
	<script src="/static/javascripts/main.js"></script>
	<script type="text/javascript">	
		$('[data-toggle="dropdown"]').on('click',function() {
			var others = $(this).closest('.dropdown').siblings().find('[data-toggle="dropdown"]')
			others.removeClass('open').siblings('.dropdown-menu').hide(650).siblings('.iconfont').removeClass('open').addClass('close');
			$(this).siblings('.dropdown-menu').find('li').removeClass('active');
			if ($(this).hasClass('open')){
				$(this).toggleClass('open').siblings('.dropdown-menu').slideUp(650);
			} else {	
				$(this).toggleClass('open').siblings('.dropdown-menu').slideDown(650);
			}
			$(this).siblings('.iconfont').toggleClass('open').toggleClass('close');
		})
		$('.dropdown-menu li').on('click', function() {
			$(this).siblings().removeClass('active');
			$(this).toggleClass('active').closest('ul').siblings('[data-toggle="dropdown"]').addClass('li-clicked');
			event.stopPropagation();
		});
	</script>
</body>
</html>
